<template>
	<div class='page'>
		<div class="login-box">
			<el-form :model="loginForm" :rules="rules" ref="loginForm" label-position="left" label-width="0px" class="login-container"
			 status-icon>
				<el-form-item prop="title" style="line-height: 40px !important;">
                    <div class="logo">
                        <svg width="50" height="50" viewBox="0 0 144 144" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M72.53 128.7a54.787 54.787 0 01-45.258-23.85 54.784 54.784 0 019.368-72.355 54.78 54.78 0 0172.95 1.125l-13 13.6a36 36 0 100 53.43l13 13.6a54.638 54.638 0 01-37.06 14.45zm44.081-27.401a4.49 4.49 0 114.49-4.49 4.5 4.5 0 01-4.49 4.49z" fill="#E03875"></path>
                            <path d="M72.18 85.79A11.87 11.87 0 1184 73.93a11.88 11.88 0 01-11.82 11.86zm49.58.21a4.488 4.488 0 01-4.404-5.366 4.488 4.488 0 016.122-3.273 4.495 4.495 0 012.772 4.148 4.503 4.503 0 01-4.49 4.49zm-13.35-.56a4.488 4.488 0 01-4.4-5.385 4.487 4.487 0 013.555-3.515 4.49 4.49 0 11.845 8.9zm13.35-14.57a4.488 4.488 0 01-4.404-5.366 4.488 4.488 0 016.122-3.273 4.496 4.496 0 012.772 4.149 4.503 4.503 0 01-4.49 4.49zm-13.35.51a4.493 4.493 0 01-4.148-2.772 4.491 4.491 0 114.148 2.771zm8.461-15.61a4.49 4.49 0 11-.02-8.981 4.49 4.49 0 01.02 8.981z" fill="#E03875"></path>
                        </svg>
                    </div>
					<label class="title">Consul Manager</label>
				</el-form-item>
				<el-form-item prop="account">
					<el-input type="text" v-model="loginForm.account" auto-complete="off" placeholder="登录账号"></el-input>
				</el-form-item>
				<el-form-item prop="secret">
					<el-input type="password" v-model="loginForm.secret" auto-complete="off" placeholder="登录密码"></el-input>
				</el-form-item>
				<el-form-item prop="more" style="margin-bottom: 10px; margin-top: -10px;">
					<label class="forgot" @click="forgot">忘记密码？</label>
				</el-form-item>
				<el-form-item style="width:100%;">
					<el-button type="primary" size="medium" style="width:100%;" @click.native.prevent="handleSubmit">
						登录
					</el-button>
				</el-form-item>
			</el-form>
		</div>
		<vue-particles
			color="#eee"
			:particleOpacity="0.7"
			:particlesNumber="60"
			shapeType="circle"
			:particleSize="8"
			linesColor="#eee"
			:linesWidth="2"
			:lineLinked="true"
			:lineOpacity="0.6"
			:linesDistance="150"
			:moveSpeed="3"
			:hoverEffect="true"
			hoverMode="grab"
			:clickEffect="true"
			clickMode="push">
		</vue-particles>
	</div>
</template>

<script>
	const jwt = require('jsonwebtoken');

	export default {
		name: 'app-login',
		data() {
			return {
				fromUrl: '/',
				loginForm: {
					account: '',
					secret: ''
				},
				rules: {
					account: [{
						required: true,
						message: 'Please enter account'
					}],
					secret: [{
						required: true,
						message: 'Please enter password'
					}]
				}
			}
		},
		methods: {
			handleSubmit(ev) {
				this.$store.dispatch("logout");
				this.$refs.loginForm.validate((valid) => {
					if (valid) {
						let params = {
							userId: this.loginForm.account,
							secret: this.loginForm.secret,
                            userName: this.loginForm.account,
                            isAdmin: true,
							scope: 'portal'
						};
                        //this.$http.fetch(this.api.appendUser, params)

						this.$http.fetch(this.api.userLogin, params)
							.then(data => {
								this.$store.dispatch('setToken', data.token);
								//初始化数据
								this.initSystemData(data.token);
								this.$message({
									message: '登录成功！',
									type: 'success'
								});
								this.$router.push(this.fromUrl);
							});
					}
				})
			},
			async initSystemData(token) {
                let payload = jwt.decode(token);
				//保存登录用户信息
				this.$store.dispatch('setUser', payload.pod);
			},
			forgot() {
				this.$alert('联系我的创造者: lonyee@live.com', '忘记密码');
			}
		},
		created() {
			if (this.$route.query.rt) {
				this.fromUrl = this.$route.query.rt;
			}
		}
	}
</script>

<style scoped>
    .logo {
        float: left;
        margin-left: 15%;
        margin-right: 10px;
        height: 50px;
    }
	.title {
		color: #555;
		font-size: 1.2rem;
		font-weight: 500;
        line-height: 50px;
	}

	.page {
		background-color: #eff3f4;
		position: absolute;
		width: 100%;
		height: 100%;
		-webkit-font-smoothing: antialiased;
		background-image: url(../../assets/images/lbg.jpg);
		background-repeat: no-repeat;
		background-size: cover;
	}

	.login-box {
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		display: block;
		width: 100%;
		max-width: 25rem;
		background-color: #fff;
		margin: 0;
		padding: 2.25em;
		box-sizing: border-box;
		border: solid 1px #DDD;
		border-radius: .5em;
        opacity: 0.9;
	}

	@media screen and (max-width: 48rem) {
		.login-box {
			max-width: 100%;
		}
	}

	.forgot {
		float: right;
		text-decoration: underline;
		font-weight: 500;
		color: #999;
		cursor: pointer;
	}
</style>
